<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <form onsubmit="return false;">
        <p>账号<input type="text" name="username" /></p>
        <p>密码<input type="password" name="password" /></p>
        <button id="submit">提交</button>
    </form>
    <div style="visibility: hidden" id="clientId" th:text="${clientId}"></div>
    <div style="visibility: hidden" id="redirectUrl" th:text="${redirectUrl}"></div>
    <div style="visibility: hidden" id="code"></div>
    <div style="visibility: hidden" id="hidden"></div>
</div>

<div>
    <button id="authorization" style="visibility: hidden" >授权</button>
    <button id="dis_authorization" style="visibility: hidden" >拒绝授权</button>
</div>

</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script>
    $("#submit").click(function(){
        let postData = {};
        postData['username'] = $("input[name='username']").val();
        postData['password'] = md5($("input[name='password']").val());      //32位小写 md5加密
        $.ajax(
            {
                url:"/oauth/login",
                data: JSON.stringify(postData),
                type: 'POST',
                contentType: "application/json",
                async: true,
                success: function(result){
                    if (result.state === "SUCCESS"){
                        $("#hidden").text("登陆成功, 请选择是否授权");
                        $("#hidden").css("visibility","visible");
                        $("#authorization").css("visibility","visible");
                        $("#dis_authorization").css("visibility","visible");
                    }else{
                        $("#hidden").text(result.message + ", 请重新登陆");
                        $("#hidden").css("visibility","visible");
                    }
                },
                error: function (result) {
                    alert("服务器出错");
                    //console.log(result);
                }
            });
    });

    $("#authorization").click(function() {
        let redirectUrl = $("#redirectUrl").text();
        window.location.href = redirectUrl + "?action=accept";
    });

    $("#dis_authorization").click(function() {
        let redirectUrl = $("#redirectUrl").text();
        window.location.href = redirectUrl + "?action=reject";
    });
</script>

</html>